<template>
  <div class="shedding-control">
    <!-- 切负荷层级设置 -->
    <div class="shedding-control__item">
      <div class="shedding-control__label">
        <span class="label-text">{{ sheddingInfo.shedding_name || '切负荷层级' }}：</span>
        <span class="label-value">{{ sheddingInfo.shedding_value }}</span>
        <span class="label-range">
          ({{ sheddingInfo.shedding_min }}-{{ sheddingInfo.shedding_max }})
        </span>
        <el-tag 
          :type="sheddingInfo.shedding_enable ? 'success' : 'danger'" 
          size="small"
          style="margin-left: 8px"
        >
          {{ sheddingInfo.shedding_enable ? '启用' : '禁用' }}
        </el-tag>
      </div>
      <div class="shedding-control__input">
        <el-input-number
          v-model="localSheddingValue"
          :min="sheddingInfo.shedding_min"
          :max="sheddingInfo.shedding_max"
          :disabled="!sheddingInfo.shedding_enable || isLoading"
          size="small"
          controls-position="right"
          style="width: 120px"
        />
        <el-button
          type="primary"
          size="small"
          :loading="updatingShedding"
          :disabled="!sheddingInfo.shedding_enable || isLoading"
          @click="handleUpdateSheddingLevel"
          style="margin-left: 8px"
        >
          设置
        </el-button>
      </div>
    </div>

    <!-- 恢复负荷层级设置 -->
    <div class="shedding-control__item">
      <div class="shedding-control__label">
        <span class="label-text">{{ sheddingInfo.recover_name || '恢复负荷层级' }}：</span>
        <span class="label-value">{{ sheddingInfo.recover_value }}</span>
        <span class="label-range">
          ({{ sheddingInfo.recover_min }}-{{ sheddingInfo.recover_max }})
        </span>
        <el-tag 
          :type="sheddingInfo.recover_enable ? 'success' : 'danger'" 
          size="small"
          style="margin-left: 8px"
        >
          {{ sheddingInfo.recover_enable ? '启用' : '禁用' }}
        </el-tag>
      </div>
      <div class="shedding-control__input">
        <el-input-number
          v-model="localRecoverValue"
          :min="sheddingInfo.recover_min"
          :max="sheddingInfo.recover_max"
          :disabled="!sheddingInfo.recover_enable || isLoading"
          size="small"
          controls-position="right"
          style="width: 120px"
        />
        <el-button
          type="primary"
          size="small"
          :loading="updatingRecover"
          :disabled="!sheddingInfo.recover_enable || isLoading"
          @click="handleUpdateRecoverLevel"
          style="margin-left: 8px"
        >
          设置
        </el-button>
      </div>
    </div>

    <!-- 刷新按钮 -->
    <div class="shedding-control__actions">
      <el-button
        type="success"
        size="small"
        :loading="isLoading"
        @click="handleRefresh"
      >
        刷新
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, onMounted } from "vue";
import { useShedding } from "@/composables/useShedding";

// Props
interface Props {
  /** CPU 编号 */
  cpu?: number;
  /** 是否自动初始化 */
  autoInit?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  cpu: 1,
  autoInit: true,
});

// Emits
interface Emits {
  (e: "refresh", cpu: number): void;
  (e: "update-shedding", cpu: number, value: number, success: boolean): void;
  (e: "update-recover", cpu: number, value: number, success: boolean): void;
}

const emit = defineEmits<Emits>();

// 使用稳控切负荷 Composable
const {
  localSheddingValue,
  localRecoverValue,
  isReady,
  sheddingInfo,
  isLoading,
  updatingShedding,
  updatingRecover,
  refreshSheddingInfo,
  updateSheddingLevel,
  updateRecoverLevel,
  initShedding,
} = useShedding();

// 事件处理函数
const handleRefresh = async () => {
  try {
    await refreshSheddingInfo(props.cpu);
    emit("refresh", props.cpu);
  } catch (error) {
    console.error("刷新稳控切负荷信息失败:", error);
  }
};

const handleUpdateSheddingLevel = async () => {
  try {
    const success = await updateSheddingLevel(props.cpu);
    emit("update-shedding", props.cpu, localSheddingValue.value, success);
  } catch (error) {
    console.error("更新切负荷层级失败:", error);
    emit("update-shedding", props.cpu, localSheddingValue.value, false);
  }
};

const handleUpdateRecoverLevel = async () => {
  try {
    const success = await updateRecoverLevel(props.cpu);
    emit("update-recover", props.cpu, localRecoverValue.value, success);
  } catch (error) {
    console.error("更新恢复负荷层级失败:", error);
    emit("update-recover", props.cpu, localRecoverValue.value, false);
  }
};

// 监听 CPU 变化
watch(
  () => props.cpu,
  (newCpu) => {
    if (newCpu && isReady.value) {
      handleRefresh();
    }
  }
);

// 生命周期
onMounted(() => {
  if (props.autoInit) {
    initShedding(props.cpu);
  }
});
</script>

<style scoped lang="scss">
.shedding-control {
  &__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px;
    background-color: var(--el-bg-color-page);
    border-radius: 6px;
    border: 1px solid var(--el-border-color-light);

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  &__label {
    display: flex;
    align-items: center;
    flex: 1;

    .label-text {
      font-weight: 500;
      color: var(--el-text-color-primary);
      min-width: 100px;
    }

    .label-value {
      font-weight: 600;
      color: var(--el-color-primary);
      margin-left: 8px;
      font-size: 16px;
    }

    .label-range {
      color: var(--el-text-color-regular);
      font-size: 12px;
      margin-left: 4px;
    }
  }

  &__input {
    display: flex;
    align-items: center;
  }

  &__actions {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--el-border-color-lighter);
    margin-top: 16px;
  }
}
</style>
